<template>
    <div class="Aniu-01">
        <div class="w" ref="abcd">

            <h3>精讲 | 课程</h3>

            <div class="tab-view">
                <div class="tab-content">
                    <div class="t-view-01" 
                        :class="flag ? 'active' : ''" 
                        v-show="cuIndex === 0"
                    >
                        <p>围绕IP重度学习产品，音视频课程+AI互动+打卡学习写作业+社群陪伴辅导。强获得感和强陪伴感，帮助用户学习、学懂、学会，从知识学习到轻教育。</p>

                        <div class="pic-view">
                            <p class="center">
                                <img src="../../../assets/imgs/app-list-tab1-1.png" alt="">
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
    import { ref } from 'vue'
    const cuIndex = ref(0)
    const abcd = ref()
    const flag = ref(false)

    const changeFn = num => {
        cuIndex.value = num
        flag.value = false

        setTimeout(() => {
            flag.value = true
        }, 200)
    }

    document.addEventListener('scroll', function() {
        if(!abcd.value) return
        const pageY = abcd.value.getBoundingClientRect().top
        if(pageY <= 200 && pageY >= -500) {
            flag.value = true
        } else {
            flag.value = false
        }
    })

    
</script>

<style lang="less" scoped>
.Aniu-01 {
    width: 100%;
    height: 968px;
    background: linear-gradient(202deg,#e3ecfc,#fafcff);
    z-index: 0;
    overflow: hidden;

    h3 {
        height: 56px;
        font-size: 40px;
        font-family: PingFang SC-Medium,PingFang SC;
        font-weight: 500;
        color: #000;
        line-height: 47px;
        text-align: center;
        padding: 90px 0 60px;
    }


    .tab-view {
        ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
            -ms-flex-direction: row;
            flex-direction: row;
            margin-bottom: 30px;

            li {
                padding: 10px 20px;
                margin-right: 44px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                -ms-flex-align: center;
                align-items: center;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                justify-content: center;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                -ms-flex-direction: row;
                flex-direction: row;

                &.active {
                    background: #00c8c8;
                    border-radius: 48px;
                    span {
                        color: #fff;
                    }
                }

                span {
                    height: 28px;
                    font-size: 20px;
                    font-family: PingFang SC-Medium,PingFang SC;
                    font-weight: 500;
                    color: #666;
                    line-height: 28px;
                }
            }
        }

        .tab-content {
            p {
                width: 740px;
                height: 64px;
                font-size: 16px;
                font-family: PingFang SC-Regular,PingFang SC;
                font-weight: 400;
                color: #999;
                line-height: 32px;
                text-align: center;
                margin: 0 auto;
                margin-bottom: 20px;
            }

            .pic-view {
                position: relative;
                height: 600px;
                display: flex;
                align-items: flex-end;
                p {
                    margin: 0;
                    height: auto;
                    width: 100%;
                }

                .center {
                    width: 100%;
                    margin: 0;
                    height: 600px;
                    transform: translateY(60px);
                    transition: all .5s ease-out;
                    opacity: 0;
                    img {
                        width: 100%;
                    }
                }

                .left {
                    position: absolute;
                    left: 0;
                    top: 100px;
                    width: 449px;
                    transform: translateY(80px);
                    transition: transform .55s ease-out,-webkit-transform .55s ease-out;
                    opacity: 0;

                    img {
                        width: 100%;
                    }
                }

                .right {
                    position: absolute;
                    bottom: 40px;
                    right: -12px;
                    width: 449px;
                    transform: translateY(80px);
                    transition: transform .55s ease-out .1s,-webkit-transform .55s ease-out .1s;
                    opacity: 0;
                    img {
                        width: 100%;
                    }

                }
            }

            .active {
                .left, .center, .right {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

        }
    }
}
</style>